<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/common.css" rel="stylesheet">
		<link href="../plugin/webuploader/webuploader.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link rel="stylesheet" href="css/carts.css" />
		<style>
			body {
				background-color: #f5f5f5;
			}
			/*不显示搜索框*/
			
			.ZZHT-search-box {
				display: none;
			}
			.tab_item .left .fr {
			    text-align: left;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="black_line"></div>
		<div class="ZZHT-container" style="margin-top:50px;margin-bottom:50px;">
			<div class="ZZHT-clear"></div>
			<div class="order_cash_box">
				<div class="title">收银台</div>
				<div class="total_price"></div>
				<div class="tab_slide">
					<form>
						<div class="tab_cont" style="padding: 30px 50px;">
							<!-- 线下支付 -->
							<div class="tab_item">
								<div class="ZZHT-f999 state"></div>
								<div class="clearfix">
									<div class="fl left" id="bank">
										<div class="clearfix">
											<div class="fl">收款银行</div>
											<div class="fr v-ellipsis ZZHT-align-right">{{bank.rechargeBankName}}</div>
										</div>
										<div class="clearfix">
											<div class="fl">支行</div>
											<div class="fr v-ellipsis ZZHT-align-right">{{bank.rechargeBranchBank}}</div>
										</div>
										<div class="clearfix">
											<div class="fl">收款人</div>
											<div class="fr v-ellipsis ZZHT-align-right">{{bank.rechargeReceiver}}</div>
										</div>
										<div class="clearfix">
											<div class="fl">收款账号</div>
											<div class="fr v-ellipsis ZZHT-align-right">{{bank.rechargeNo}}</div>
										</div>
									</div>
									<div class="fl right">
										<div class="clearfix upload" style="border-bottom: 1px solid #eee;">
											<div class="fl">转账凭证</div>
											<img src="../img/bgimg_error_spcc.png" alt="" class="bankImg"/>
											<div class="fr v-ellipsis ZZHT-align-right">
												<span class="upload-btn webuploader-container" id="adFilePicker1"><div class="webuploader-pick">上传</div>
													<div id="rt_rt_1cgst53ns1ksa189n1qkt65bju81" style="position: absolute; top: -13px; left: 0px; width: 120px; height: 44px; overflow: hidden; bottom: auto; right: auto;">
														<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
														<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
													</div>
												</span>
												<input type="hidden" class="input-file bz upload-files" id="orderImg" name="orderImg" value="">
												<span id="urlLabel" style="font-size: 12px;vertical-align: top;" class="ZZHT-f999">请选择图片</span>
											</div>
										</div>
										<div class="clearfix" style="border-bottom: 1px solid #eee;">
											<textarea maxlength="200" rows="3" id="remark" name="remark" class="ZZHT-f999 remark" placeholder="请填写备注（选填）"></textarea>
										</div>
									</div>
									<div class="fl" style="margin-top: 164px;">
										<input id="offlineSubmit" class="fredBtn" type="button" value="提交">
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div id="ck1"></div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
		<script type="text/javascript" src="../plugin/layer/layer.js"></script>
		<script src="../plugin/webuploader/webuploader.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/common_view.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>

		<script src="../js/lxs_jk.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var vm = new Vue({
				el:"#bank",
				data:{
					bank:{}
				}
			})
			
			$(function(){
				var money = gup('money');
				var orderNO = gup('orderNO');
				
				$('.total_price').html('&yen;'+money);
				
				$.ajax({//获取汇款银行信息
					type:"get",
					url: SURL + "webAccount/clickUnderLinePay",
					async:false,
					success: function(res) {
						console.log(res);
						vm.bank = res.entity;
					}
				});
				
				ZZHT.upload({
					pick: '#adFilePicker1',
					formData: {
						dir: 'goods',
						isWatermark: 1,
						isThumb: 1
					},
					accept: {
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					},
					callback: function(f) {
						var json = f;
						console.log(f);
						if(json.messageCode == '200') {
							id = this.pick;
							$('#orderImg').val(json.entity);
							$('.bankImg').attr('src',json.entity);
						}
					},
				});
				
				$('.fredBtn').click(function(){
					var img = $('#orderImg').val();
					if(img){
						$.ajax({//获取汇款银行信息
							type:"get",
							url: SURL + "webAccount/underLinePay",
							data:{
								"id":gup('id'),
								"orderImg":img,
								"remark":$('#remark').val()
							},
							success: function(res) {
								console.log(res);
								if(res.messageCode=='200'){
									location.href = 'ing.html?money='+money+'&orderNO='+orderNO;
								}else{
									layer.msg(res.message);
								}
							}
						});
					}else{
						layer.msg('请上传转账凭证');
					};
				})
			})
		</script>
	</body>

</html>